<template>
  <div class="demo-split">
    <Split v-model="split2" mode="vertical">
      <div slot="top" class="demo-split-pane" style="margin: 20px">
        <Form ref="formInline" :model="formInline" inline label-position="left">
          <FormItem>
            <Select v-model="selectValue" style="width:200px">
              <Option v-for="item in selectList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Input type="text" v-model="formInline.carNum" placeholder="">
              <span slot="prepend">车牌号</span>
            </Input>
          </FormItem>

          <FormItem v-if="selectValue==2">
            <Input type="text" v-model="formInline.applicantName" placeholder="">
              <span slot="prepend">申请人姓名</span>
            </Input>
          </FormItem>

          <FormItem v-if="selectValue==2">
            <Input type="text" v-model="formInline.applicantUnit" placeholder="">
              <span slot="prepend">申请人单位</span>
            </Input>
          </FormItem>
          <FormItem v-if="selectValue==1">
            <Input type="text" v-model="formInline.carApplyUnit" placeholder="">
              <span slot="prepend">申请单位</span>
            </Input>
          </FormItem>

          <FormItem>
            <Input type="text" v-model="formInline.buildVersion" placeholder="">
              <span slot="prepend">导入版本号</span>
            </Input>
          </FormItem>

          <FormItem>
            <Input type="text" v-model="formInline.carBussType" placeholder="">
              <span slot="prepend">业务类型</span>
            </Input>
          </FormItem>

          <!--  车、路类型  carType -->
          <FormItem v-if="selectValue==1">
            <Select v-model="selectCarType" style="width:200px" placeholder="类型">
              <Option v-for="item in selectCarTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>

          <FormItem prop="date">
            <!--v-model="formInline.timeStamp"-->
            <DatePicker ref="datePicker" :editable="false" type="date" @click="handleClick" value="formInline.timeStamp"
                        @on-change="formatTimeEle" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="日期">

            </DatePicker>
          </FormItem>

          <FormItem>
            <Button type="primary" icon="ios-search" @click="handleSubmit(formInline,selectValue)">查询
            </Button>
            <Button  @click="clearForm()">重置
            </Button>
          </FormItem>
          <br>
          <Button type="success" style="float:right;" @click="exportExcel(formInline,selectValue)">导出</Button>
        </Form>
      </div>
      <div slot="bottom" class="demo-split-pane">
        <Table border :columns="columns1" :data="data1" v-if="selectValue==1" height="400" ></Table>
        <Table border :columns="columns2" :data="data2" v-if="selectValue==2" height="400" ></Table>
        <Page ref="page" show-total show-sizer size="small" :current="pageData.current" :total="pageData.total"
              :page-size="pageData.pageSize" :page-size-opts="pageData.pageSizeOpts"
              @on-change="changePage" @on-page-size-change="changeSize"></Page>
      </div>
    </Split>
  </div>
</template>

<script>
  import {baseUrl} from "../../api/api";
  import {downloadExcel} from "../../api/api";

  export default {
    name: "Search",
    data() {
      return {
        datePicker: false,
        pageData:{
          current: 1,
          total: 0,
          pageSize: 10,
          pageSizeOpts:[10,20,50]
        },
        selectCarType: '',
        selectCarTypeList: [
          {
            label: '全部',
            value: ''
          }, {
            label: '养护生产-路网',
            value: 1
          }, {
            label: '生产生活-路网',
            value: 2
          }, {
            label: '养护生产-区间',
            value: 3
          }, {
            label: '生产生活-区间',
            value: 4
          },
        ],
        selectBuss: '',
        selectBussList: [
          {
            label: '全部',
            value: ''
          },
          {
            label: '新增',
            value: 1
          }, {
            label: '取消',
            value: 2
          }, {
            label: '已办理',
            value: 3
          },
        ],
        selectValue: 1,
        selectList: [
          {
            label: '公务车',
            value: 1
          }, {
            label: '职工车',
            value: 2
          }
        ],
        formInline: {
          selectCarType: this.selectCarType
        },
        split2: 0.4,
        columns1: [
          {
            title: '车牌号',
            key: 'carNum'
          },
          {
            title: '厂牌',
            key: 'carLabel'
          },
          {
            title: '车牌颜色',
            key: 'carColor'
          },
          {
            title: '收费车型',
            key: 'carModel'
          },
          {
            title: '申请单位',
            key: 'carApplyUnit'
          },
          {
            title: '行驶本登记单位',
            key: 'carDriveUnit'
          },
          {
            title: '通行区间',
            key: 'carPassInterval'
          },
          {
            title: '业务类型',
            key: 'carBussType'
          },
          {
            title: '备注',
            key: 'carNote'
          }, {
            title: '导入版本号',
            key: 'buildVersion'
          },

        ],
        columns2: [
          {
            title: '车牌号',
            key: 'carNum'
          },
          {
            title: '厂牌',
            key: 'carLabel'
          },
          {
            title: '车牌颜色',
            key: 'carColor'
          },
          {
            title: '收费车型',
            key: 'carModel'
          },
          {
            title: '申请人单位',
            key: 'applicantUnit'
          },
          {
            title: '申请人姓名',
            key: 'applicantName'
          },
          {
            title: '行驶本登记',
            key: 'carDriveRegist'
          },
          {
            title: '固定通行站点',
            key: 'carFixedSite'
          },
          {
            title: '可选通行站点',
            key: 'carChooseSite'
          },
          {
            title: '业务类型',
            key: 'carBussType',
          },
          {
            title: '备注',
            key: 'carNote'
          }, {
            title: '导入版本号',
            key: 'buildVersion'
          },

        ],
        data1: [],
        data2: [],
        data6: []
      }
    },
    methods: {
      handleClick (){
        this.datePicker = !this.datePicker
      },
      handleClear() {
        this.datePicker = false
      },
      formatTimeEle(time) {
        this.formInline.timeStamp=time;   //date是绑定的值
      },
      changeSize(size) {
        if (this.pageData.total != 0) {
          this.$refs["page"].currentPage = Math.ceil((this.pageData.current * this.pageData.pageSize) / size)
          this.pageData.pageSize = size;
        }
      },
      changePage(index) {
        this.pageData.current=index
        this.handleSubmit(this.formInline, this.selectValue)
      },
      clearForm() {
        this.formInline={timeStamp:null};
        this.$refs['datePicker'].handleClear()
      },
      exportExcel(name, selectValue, selectCarType) {
        if (selectValue === 1) {//公务车
          name.carType = this.selectCarType
          if (name.timeStamp == '') {
            delete name.timeStamp
          }
          this.$axios({
            method: 'post',
            url: baseUrl + '/productFreeApply/exportExcel',
            responseType: "arraybuffer",
            data: name,
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              token: localStorage.getItem('logintoken')
            },
            traditional: true,
            transformRequest: [
              function(data) {
                let ret = ''
                for (let it in data) {
                  ret +=
                    encodeURIComponent(it) +
                    '=' +
                    encodeURIComponent(data[it]) +
                    '&'
                }
                return ret
              }
            ]
          }).then(res => {
            downloadExcel(res.data);
            });
        } else if (selectValue === 2) {//职工车
          if (name.timeStamp == '') {
            delete name.timeStamp
          }
          this.$axios({
            method: 'post',
            url: baseUrl + '/employFreeApply/exportExcel',
            responseType: "arraybuffer",
            data: name,
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              token: localStorage.getItem('logintoken')
            },
            traditional: true,
            transformRequest: [
              function(data) {
                let ret = ''
                for (let it in data) {
                  ret +=
                    encodeURIComponent(it) +
                    '=' +
                    encodeURIComponent(data[it]) +
                    '&'
                }
                return ret
              }
            ]
          }).then(res => {
              downloadExcel(res.data)

            });
        }


      },
      handleSubmit(name, selectValue) {
        let data = {};
        let page = {
          current: this.pageData.current,
          size: this.pageData.pageSize
        }
        data.page = page;

        if (selectValue === 1) {//公务车
          name.carType = this.selectCarType
          if (name.timeStamp == '') {
            delete name.timeStamp
          }
          data.data= name
          this.$axios({
            method: 'post',
            url: baseUrl+'/productFreeApply/getListByPage',
            data: data
          })
            .then(res => {
              this.pageData.total=res.data.data.total
              this.data1 = res.data.data.records;
            });
          // })
        } else if (selectValue === 2) {//职工车
          if (name.timeStamp == '') {
            delete name.timeStamp
          }
          data.data= name
          this.$axios({
            method: 'post',
            url: baseUrl+'/employFreeApply/getListByPage',
            data: data
          })
            .then(res => {
              this.pageData.total=res.data.data.total
              this.data2 = res.data.data.records;
            });
          // })
        }

      },
      show(index) {
        this.$Modal.info({
          title: 'User Info',
          content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
        })
      },
      remove(index) {
        this.data6.splice(index, 1);
      }
    }
  }
</script>

<style scoped>
  .demo-split {
    height: 40em;
    border: 1px solid #dcdee2;
    text-align: center;
    vertical-align: middle;
  }

  .demo-split-pane {
    padding: 10px;
  }
</style>
